import React from 'react';
import './login.css';
import { Router,Link } from 'react-router-dom';
import { Form,Select,Input,Button,Checkbox,MessageBox } from 'element-react';
import axios from 'axios';
import md5 from '../../assets/js/md5';
//console.log(md5.hexMD5('dev123123'))  admin dev123123

class Login extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = {
            isRemember:false,
            form: {
                password: '',
                userName:''
            },
            rules: {
                userName: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        };
    }

    handleSubmit(e) {
        e.preventDefault();
        this.refs.form.validate((valid) => {
            if (valid) {
                var params = new URLSearchParams();
                //params.append('username','admin');
                //params.append('password','98b4dbbed385c3fbbf00d3a69c89d850');
                params.append('username',this.state.form.userName);
                params.append('password',md5.hexMD5(this.state.form.password));

                axios.post('/count/login', params).then((data) => {
                    console.log(data)
                    if(data.data.code == 0){
                        if(this.state.isRemember){
                            let loginData = {};
                            loginData.userName = this.state.form.userName;
                            loginData.password = this.state.form.password;
                            localStorage.setItem('usePwd',JSON.stringify(loginData))
                        }else{
                            localStorage.clear()
                        }
                        localStorage.setItem('userName', this.state.form.userName);
                        this.props.history.push('/home')
                    }else{
                        MessageBox.alert(data.data.msg);
                    }
                }).catch((e) => {
                    console.log(e);
                })
                
            } else {
                return false;
            }
        });
    }
    //是否记住密码
    handleCheckbox(e){
        let isChecked = e.target.checked;
        if(isChecked){
            this.setState({
                isRemember: true
            })
        }else{
            this.setState({
                isRemember: false
            })
        }
    }
    onChange(key, value) {
        this.setState({
            form: Object.assign({}, this.state.form, { [key]: value })
        });
    }
    componentDidMount(){
        if(localStorage.getItem('usePwd')){
            this.setState({
                form: Object.assign({}, this.state.form, { userName: JSON.parse(localStorage.getItem('usePwd')).userName,password:JSON.parse(localStorage.getItem('usePwd')).password })
            })
        }
    }

	render(){
		return(
			<div className='logIn_bg'>
                <img src={require('../../assets/img/login_bg.png')} alt=""  className='login_bg'/>
                <img src={require('../../assets/img/login_logo.png')} alt=""  className='login_login'/>
				<div className='LoginBox'>
                    <img src={require('../../assets/img/login_kuang.png')} alt=""  className='login_kuang'/>
                    {/*form表单*/}
                    <Form ref="form" model={this.state.form} rules={this.state.rules} labelWidth="100" className="demo-dynamic">
                        <Form.Item prop="userName">
                            <Input value={this.state.form.userName} onChange={this.onChange.bind(this,'userName')} placeholder='请输入用户名' className='userName'></Input>
                        </Form.Item>

                        <Form.Item  prop="password">
                            <Input type="password" value={this.state.form.password} onChange={this.onChange.bind(this,'password')} autoComplete="off" className='password'  placeholder='请输入密码'/>
                        </Form.Item>

                        <div className="form-group">
                            <label htmlFor="chk" className="check">
                                <input type="checkbox" id="chk" checked={this.state.isRemember} onClick={this.handleCheckbox.bind(this)} />
                                <span>记住密码</span>
                            </label>
                        </div>
                        <Form.Item>
                            <Button type="primary" onClick={this.handleSubmit.bind(this)} className='landing'>登录</Button>
                        </Form.Item>
                    </Form>
				</div>

			</div>
		);
	}
}

export default Login;